<template>
	<view>
		<view class="feng_flow">
			<view class="flow_block">
				<view class="flow_item" v-for="(item, i1) in lists1" :key="i1" @click="shangpinxiangqing(i1)">
					<image :src="item.image" mode="widthFix" style="width: 100%;"></image>
					<view class="flow_item_con">
						<view class="flow_item_title">{{ item.title }}</view>
						<view class="flow_item_des">{{item.score}}积分</view>

					</view>
				</view>
			</view>
			<view class="flow_block">
				<view class="flow_item" v-for="(item2, i2) in lists2" :key="i2" @click="shangpinxiangqing(i2)">
					<image :src="item2.image" mode="widthFix" style="width: 100%;"></image>
					<view class="flow_item_con">
						<view class="flow_item_title">{{ item2.title }}</view>
						<view class="flow_item_des">{{item2.score}}积分</view>

					</view>

				</view>
			</view>
		</view>
		<view class="feng_flow" style="display: none;">
			<view class="flow_block">
				<view class="flow_item" v-for="(data,da_i) in dataLists" :key="da_i">
					<image :src="data.image" @error="imgError" @load="imgLoad" :id="da_i" mode="widthFix"
						style="width:100%;"></image>
				</view>
			</view>
			<view class="flow_block"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'fengFlow',
		props: {
			dataLists: {
				default: []
			}
		},
		data() {
			return {

				lists1: [],
				lists2: [],
				list1Height: 0,
				list2Height: 0,
				tmp_data: [],
				loaded: [], //图片加载成功数组
				loadErr: [], //图片加载失败数组
				showLoad: false
			};
		},
		methods: {
			//处理数据
			refresData() {
				this.hideLoadFlag()
				if (this.loaded.length + this.loadErr.length < this.tmp_data.length) return;
				const that = this
				this.tmp_data.map((da, di) => {
					if (that.list1Height > that.list2Height) {
						that.list2Height += da.img_height
						that.lists2.push(da)
					} else {
						that.list1Height += da.img_height
						that.lists1.push(da)
					}

				})
			},
			//图片加载完成补齐数据
			imgLoad(e) {
				this.loaded.push(e.target.id)
				//存储数据
				this.tmp_data[e.target.id]['img_width'] = e.detail.width
				this.tmp_data[e.target.id]['img_height'] = e.detail.height
			},
			//图片未加载成功触发
			imgError(e) {
				console.log(e)
				this.loadErr.push(e.target.id)
			},
			showLoadFlag() {
				if (!this.showLoad) {
					this.showLoad = true
					uni.showLoading({
						title: 'loading...',
						mask: 'none'
					})
				}
			},
			hideLoadFlag() {
				if (this.showLoad) {
					uni.hideLoading();
					this.showLoad = false;
				}
			},
			shangpinxiangqing(id) {
				uni.navigateTo({
					url: '/pages/integral/commodity?id=' + id
				})
			}
		},
		mounted() {
			const that = this
			that.tmp_data = that.dataLists
			that.showLoadFlag()
		},
		watch: {
			dataLists() {
				console.log('数据变了触发');
				this.loaded = []
				this.loadErr = []
				this.tmp_data = this.dataLists
				this.showLoadFlag()
			},
			loaded() {
				console.log('加载标记变化')
				//最后一个加载完成负责刷新数据
				this.refresData()
			},
			loadErr() {
				//最后一个加载完成负责刷新数据
				this.refresData()
			}
		}
	};
</script>

<style>
	.feng_flow {
		display: flex;
		padding: 15upx;
	}

	.flow_block {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.flow_item {
		margin: 15upx;
		border-radius: 20upx;
		background: #f4f4f4;
		overflow: hidden;
	}

	.flow_item_con {
		padding: 10upx 20upx 20upx;
	}

	.flow_item_title {
		position: relative;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;

		color: #333333;
		height: 40rpx;
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示
		display: -webkit-box;
		-webkit-line-clamp: 1; // 超出多少行
		-webkit-box-orient: vertical;


	}

	.flow_item_des {
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #4D64DE;
		margin-top: 20rpx;
	}
</style>
